<script setup lang="ts">
import { useI18n } from 'vue-i18n';
import { computed, ref } from 'vue';
import tcl from '@/assets/home/partners/tcl.png';
import wmusic from '@/assets/home/partners/wmusic.png';
import ruantong from '@/assets/home/partners/ruantong.png';
import gosuncn from '@/assets/home/partners/gosuncn.png';
import pengcheng from '@/assets/home/partners/pengcheng.png';
import shenzhenwan from '@/assets/home/partners/shenzhenwan.png';
import shenzhenqixiangju from '@/assets/home/partners/shenzhenqixiangju.png';
import beijingdaxue from '@/assets/home/partners/beijingdaxue.png';
import qinghuadaxue from '@/assets/home/partners/qinghuadaxue.png';
import haerbindaxue from '@/assets/home/partners/haerbindaxue.png';
import xiandianzi from '@/assets/home/partners/xiandianzi.png';
import edinburgh from '@/assets/home/partners/edinburgh.png';
import wwu from '@/assets/home/partners/wwu.png';
import paris from '@/assets/home/partners/paris.png';
import renminzhongke from '@/assets/home/partners/renminzhongke.png';
import douyu from '@/assets/home/partners/douyu.png';
import OIcon from '@/components/OIcon.vue';
import IconRight from '~icons/app/icon-right.svg';

const btn_link = '/';
const { t } = useI18n();
const partner = computed(() => {
  return {
    title: t('home.partner.title'),
    btn_text: t('home.partner.btn_text'),
  };
});
const homePartners = [
  {
    id: 'tcl',
    img: tcl,
  },
  {
    id: 'wmusic',
    img: wmusic,
  },
  {
    id: 'ruantong',
    img: ruantong,
  },
  {
    id: 'gosuncn',
    img: gosuncn,
  },
  {
    id: 'pengcheng',
    img: pengcheng,
  },
  {
    id: 'shenzhenwan',
    img: shenzhenwan,
  },
  {
    id: 'shenzhenqixiangju',
    img: shenzhenqixiangju,
  },
  {
    id: 'beijingdaxue',
    img: beijingdaxue,
  },
  {
    id: 'qinghuadaxue',
    img: qinghuadaxue,
  },
  {
    id: 'haerbindaxue',
    img: haerbindaxue,
  },
  {
    id: 'xiandianzi',
    img: xiandianzi,
  },
  {
    id: 'edinburgh',
    img: edinburgh,
  },
  {
    id: 'wwu',
    img: wwu,
  },
  {
    id: 'paris',
    img: paris,
  },
  {
    id: 'renminzhongke',
    img: renminzhongke,
  },
  {
    id: 'douyu',
    img: douyu,
  },
];
</script>
<template>
  <ul class="home-partners">
    <li v-for="item in homePartners" :key="item.id" class="home-partners-item">
      <img class="partner-logo" :src="item.img" :alt="item.id" />
    </li>
  </ul>
</template>
<style scoped lang="scss">
.home-partners {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: 20px;
  border-radius: 4px;
  padding: 20px;
  background-color: var(--theme-card-bg);

  &-item {
    position: relative;
    list-style: none;
    padding: 0 40px;
    text-align: center;
  }
}

@media (max-width: 1100px) {
  .home-partners {
    display: grid;
    grid-template-rows: repeat(3, 1fr);
    grid-template-columns: repeat(4, 1fr);
    &-item {
      padding: 0 20px;
    }
  }
}
</style>
